<template>
  <div>REF:{{ Man }}</div>
  <div>shallowRef:{{ Man2 }}</div>
  <div>customRef:{{ obj }}</div>
  
  <button @click="change">111</button>
</template>

<script setup lang="ts">
import { ref, shallowRef, customRef } from "vue";
import type { Ref } from "vue";

function MyRef<T>(value) {
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newval) {
        value = newval;
        trigger();
      },
    };
  });
}

const obj = MyRef<string>("小满");

type M = {
  name: string;
};
const Man: Ref<M> = ref({ name: "小曼曼" });

const Man2 = shallowRef({ name: "小曼曼2" });

const change = () => {
  // Man2.value = {
  //   name: "大妈",
  // };
  obj.value='修改'
};
</script>
<style></style>
